Page load speed is a UX consideration. How can we check the speed of our pages and how can we make improvements?

1. What is Page Speed?

Pagespeed is…

Page speed refers to the amount of time it takes for a website to fully load and display its content in a user's web browser. It is typically measured in seconds and is an important factor in determining a website's user experience. Fast-loading pages give users a more seamless and enjoyable browsing experience, while slow-loading pages can lead to frustration and increased bounce rates.

Page speed is influenced by many different factors, including the size of the web page, server response time, the efficiency of the code and scripts used on the page, and the number and size of images , videos and other media files we post to the website. Besides, the browser display speed and the user's internet connection speed also affect page loading speed.

There are many ways to optimize page speed today including various techniques such as minimizing HTTP requests, reducing file size through compression, optimizing images, leveraging browser caching, etc. Or use a Content Delivery Network (CDN) and optimize server performance (something I'll talk about in more detail at the end of the article). By improving page speed, website owners can increase user satisfaction, increase engagement, and improve conversion rates.

What is the difference between page speed and website speed?

Page speed and site speed are related concepts but they refer to different aspects of website performance. Site speed refers to the overall speed and performance of the entire website, including all web pages and their interactions with each other. In addition, site speed takes into account the overall performance of all pages on a website, including factors such as server response time, navigation between pages, and overall user experience. use. Site speed reflects how quickly users can navigate between different pages, access content, and interact with different features throughout the website. In short, while page speed focuses on the load time of each individual web page, site speed looks at the overall performance and speed of the entire website, including factors beyond page load time. . Both are important in providing a positive user experience and achieving website performance goals.

2. Why is Page speed important?

Why is Page Speed important? In fact, fast-loading web pages provide a better user experience. Users prefer websites that load quickly and are responsive to their interactions.

A slow-loading page can frustrate users, leading to higher bounce rates and decreased engagement. By improving page speed, you can enhance user satisfaction and keep visitors on your site longer. According to Google statistics, mobile page loading speed should be less than 3 seconds to attract users to stay on the page and continue using the service. That means, the slower your page loading speed is, the less attractive it will be to users and users may not have enough patience to wait for your website to load. If the website has a page loading speed of 1 to 3 seconds, the percentage of users that will leave is 32%, but the difference will be huge if within 5 seconds the number of users who leave the page will be up to 90%. The longer the page takes to load, the higher the user churn rate will be.

statistics about time of page loading and bounce rate

Furthermore, page speed is a ranking factor for search engines like Google. Faster-loading pages are more likely to rank higher in search engine results pages (SERPs). Google's algorithms prioritize user experience, and page speed is one of the metrics used to assess it. By improving page speed, we can potentially improve your website's visibility and organic search traffic. Moreover, page speed affects crawlability and indexing efficiency. Search engine bots allocate limited resources for crawling web pages, and faster-loading pages are crawled more efficiently, ensuring that all relevant content is included in search engine indexes. Overall, prioritizing page speed optimization is crucial for improving user experience, mobile-friendliness, crawlability, and ultimately achieving higher rankings in search engine results.

In this article, I will give some ways to measure page load speed. You can learn and read more about it but after that, I will write and analyze a common and popular way today, which is pagespeed insight provided by Google.

Google PageSpeed Insights

Try by yourself!

PageSpeed Insights is a tool provided by Google that analyzes the performance of web pages and provides suggestions for optimizing their speed and user experience.It gives you a score between 0 and 100 and evaluates both mobile and desktop versions of web pages and assigns a score based on various performance metrics.

When you enter a URL into PageSpeed Insights, the tool generates a report to you that includes:

Performance Score: This is a numerical score out of 100 that indicates how well the page performs in terms of speed and optimization. A higher score indicates better performance.
Field Data: PageSpeed Insights provides real-world performance data collected from users who have visited the page using the Chrome browser. This includes metrics such as First Contentful Paint (FCP) and Largest Contentful Paint (LCP), which measure how quickly content is displayed to users.
Opportunities: PageSpeed Insights identifies specific opportunities for improvement, such as optimizing images, reducing server response times, and eliminating render-blocking resources. It provides actionable recommendations for addressing these issues and improving page performance.
Diagnostics: The tool also highlights any issues or potential problems that may be affecting page speed and user experience. This could include issues with JavaScript and CSS optimization, inefficient resource loading, or other technical issues.

What will page speed insight show you?

Page speed insights will show you 4 main score levels. The first is Performance, this will be the overall score of your website's performance. They will be measured based on five factors: FCP (First Contentful Paint), SI (Speed Index), LCP (Largest Contentful Paint), TBT (Total Blocking Time) and CLS (Cumulative Layout Shift). Next will be the Accessibility score, which will be a scale to evaluate the ability to navigate on the page, the color and contrast factors displayed on the website for people who are blind or visually impaired. imperfect. Next is Best Practices, this section will category measures how well your page adheres to web development best practices. Like using modern web technologies, optimized code, and secure connections. And finally SEO, this section will calculate scores on the ability to optimize data on the website for search capabilities, access and information provision.

Based on Google's rating table, if your score is above 90, this will be good. If your score range is from 50-89, it will be a level where you need to improve many factors. If it is below 50, your website will need to be heavily modified and many aspects need to be considered.

Google Pagespeed Insights evaluation criteria

Websites should limit the use of redirects on the destination page
Need to enable data compression function before sending to the browser
Server response times should be made as fast as possible
The browser cache function should be expanded
CSS and Javascript resources present on the website must be unpacked
Reduce website size by compressing image sizes
The process of inserting CSS folders into the website needs to be strictly optimized
The order of content priority on the website must be established clearly and specifically
Remove Javascript and CSS blocking before page loads
Make the most of asynchronous properties.

4. How to improve Page Loading speed?

Compress Your Images

Images are what contribute to your website loading slowly. Choose images that are the right size and optimal resolution for your websiteThere are many tools to help you change the size, quality, and resolution of your images such as: Photoshop, Illustrator, reduceimages.com (as free to use) or PicResize (free to use) etc.

Choose the right image format because different image types require different image file formats. Let's analyze the most popular formats and how to use them: JPEG, PNG, GIF or WebP

Minify JavaScript, CSS, and HTML

Minify JavaScript:

Use automated tools or build processes: There are several tools available, such as UglifyJS, Terser, and Closure Compiler, that can automatically minify JavaScript code. You can integrate these tools into your build process or use them as standalone tools to minify your JavaScript files.

Remove unnecessary white spaces, comments, and formatting: Minification involves removing unnecessary characters and formatting from JavaScript code while preserving its functionality. This includes removing white spaces, comments, and line breaks.

Consolidate and concatenate files: Reduce the number of HTTP requests by consolidating multiple JavaScript files into one file and concatenating them. This can help reduce latency and improve loading times.

Minify CSS:

Use CSS minification tools: Similar to JavaScript, there are several tools available for minifying CSS code, such as cssnano, CleanCSS, and YUI Compressor. These tools can automatically minify CSS files and optimize their size.

Remove unnecessary code: Minification involves removing unnecessary CSS code, such as comments, whitespace, and redundant selectors. Review your CSS files to identify and remove any unused or redundant styles.

Combine CSS files: Just like JavaScript, you can improve page speed by reducing the number of HTTP requests for CSS files. Combine multiple CSS files into a single file to reduce latency and improve loading times.

Minify HTML:

Use online tools or server-side libraries: There are online tools available, such as HTMLMinifier, that can automatically minify HTML code. Additionally, server-side libraries like PHP Minify can minify HTML output dynamically.

Remove unnecessary elements: Minify HTML by removing unnecessary elements, such as comments, whitespace, and redundant attributes. Keep the HTML structure clean and concise to optimize loading times.

Enable Gzip compression: Enable Gzip compression on your web server to compress HTML files before they are sent to the client's browser. This can further reduce file sizes and improve page speed.

Use a Content Delivery Network (CDN)

A Content Delivery Network (CDN) is a network of distributed servers strategically located in various geographic regions worldwide. Its primary purpose is to deliver web content, such as images, videos, CSS files, JavaScript files, and other static assets, to users more efficiently and reliably. When a user requests content from a website, the CDN automatically serves that content from the server closest to the user's location, reducing the physical distance the data needs to travel. This proximity minimizes latency and significantly improves page load times, resulting in a faster and smoother user experience. Additionally, CDNs cache static content on their servers, reducing the load on origin servers and ensuring consistent performance even during periods of high traffic. Furthermore, CDNs enhance website security by offering features such as DDoS protection, web application firewalls, and SSL/TLS encryption. Overall, leveraging a CDN is a highly effective strategy for optimizing content delivery, improving website performance, and providing a seamless browsing experience for users around the globe.

As an example of this, let's say you are in Nigeria and need to open a website whose source address is in the UK. The distance between Nigeria and England is 5256.8 km and if you do not use any method to effectively optimize page loading speed, you will definitely not have enough patience to wait for that website to appear on the website, your computer or device screen. But if a website uses a CDN, and someone is in France and has visited that website, the server in Nigeria will use the data that was used for the user in France. Because France is closer to the UK (with a distance of 1091.26 km), this is how CDN works, instead of having to download and transmit all the data from a long distance place in the UK, the server in Nigeria will find the data closer to help increase data transmission capacity.

example for distance between Uk and France and Nigeria